<template>
    <div class="bigbox">
        <div class="box">
            <div class="addHeader">
                <span class="header1">场馆添加</span>
                <el-button type="info" @click="back">＜返回</el-button>
            </div>
            <div class="content">

                <el-form :model="form" label-width="120px" style="margin-left:60px">
                    <el-form-item label="优惠券名称">
                        <el-input v-model="form.name" placeholder="请输入优惠券名称" style="width: 30%" />
                    </el-form-item>
                    <el-form-item label="类型">
                        <el-radio-group v-model="form.coursestype">
                            <el-radio label="课程券" />
                            <el-radio label="商场券" />
                        </el-radio-group>
                    </el-form-item>
                        <el-form-item label="面额">
                            <el-input v-model="form.Denomination" placeholder="请输入面额及抵扣金额" style="width: 30%" />
                        </el-form-item>
                        <el-form-item label="发放数量">
                            <el-input v-model="form.num" placeholder="请输入优惠券发放总数量" style="width: 30%" />
                        </el-form-item>

                        <el-form-item>
                            <el-button type="primary" @click="onSubmit">提交</el-button>
                        </el-form-item>
                </el-form>

            </div>
        </div>
    </div>
</template>
  
<script lang="ts">
import { defineComponent, } from 'vue';
import { reactive } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { useStore } from "vuex";


export default defineComponent({
    name: "addactivity",
    setup() {
        const router = useRouter()
        const store = useStore()
        const form = reactive({
            name: "",
            courses: "",
            coursestype: "课程券",
            Denomination: "",
            num: ""
        })

        const onSubmit = () => {
            store.commit("addactivity", form)
            router.push({ name: "Activity" })
            console.log(form)
        }
        const back = () => {
            router.push({ name: "Activity" })
        }
        return {
            form,
            onSubmit,
            back
        }
    }
})
</script>
  
<style scoped>
.bigbox {
    margin: 50px;
    background-color: white;
}

.box {
    margin: 20px;
    border: 1px;
}

.addHeader {
    height: 70px;
    background-color: rgb(199, 196, 196);
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: auto;
    text-align: center;
}
</style>